<script setup>
import { ref } from 'vue'

const props = defineProps({
    title: String,
    noHeader: Boolean,
    noFooter: Boolean,
    center: Boolean,
    marginTop: {
        default: 30
    },
    size: {
        default: '36%'
    }
})

const offsetTop = -(window.screen.availHeight - 120) * 0.2 + 'px'

const height = document.body.clientHeight - 100 - (props.noFooter ? 0 : 60)

const emit = defineEmits(['submit', 'close'])

const visible = ref(false)

const open = () => {
    visible.value = true
}

const close = () => {
    visible.value = false
    emit('close')
}

const submit = async () => {
    //返回ture表示关闭
    await emit('submit', (flag) => {
        flag && close()
    })
}
//把方法暴露给父组件
defineExpose({
    open,
    close
})
</script>

<template>
    <div>
        <el-drawer :title="title" :size="size" append-to-body destroy-on-close show-close v-model="visible" direction="rtl"
            @close="close">
            <div class="height100 flex-column-between">
                <div v-if="!noHeader">
                    <slot name="header"></slot>
                </div>
                <el-scrollbar class="flex1 width100" :height="height + 'px'">
                    <div class="height100" :class="{'flex-column-align-center top': center}"
                        :style="{marginTop: center ? offsetTop : `${marginTop}px`}">
                        <div class="width100">
                            <slot></slot>
                        </div>
                    </div>
                </el-scrollbar>
                <div class="footer" v-if="!noFooter">
                    <slot name="footer">
                        <div class="flex-align-center height100">
                            <div class="paddingX20">
                                <el-button size="small" @click="close" class="margin-right40">取消</el-button>
                            </div>
                            <div class="paddingX20">
                                <el-button size="small" @click="submit" type="primary">确定</el-button>
                            </div>
                        </div>
                    </slot>
                </div>
            </div>
        </el-drawer>
    </div>

</template>

<style lang="scss" scoped>
.footer {
    width: 100%;
    min-height: 60px;
    height: 60px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    .el-button {
        min-width: 110px;
    }
}
</style>